
<!-- 输入框  视图  V -->
<input type="text" id="input">


<script>
// 数据 M
const data  = {
  name:'柴柴老师'
}

// M -> V 数据每次变化 视图都会使用最新的数据进行更新
// Object.defineProperty
let _name = ''  // 中间变量
Object.defineProperty(data,'name',{
  // 获取属性的时候自动执行 data.name
  // 这个函数return的值是什么 获取到的data.name就是什么 因为这里没有retrun 所以是undefined
  // 解决事情：怎么样把修改之后的新数据 放到return的位置上去
  get(){
    console.log('name被获取了');
    return _name
  },
  // 修改属性的时候自动执行 data.name = 'pink'
  set(newValue){
    console.log('name被修改了');
    // 拿到最新的修改值更新视图
    _name = newValue
    document.getElementById('input').value = newValue
  }
})

// V -> M 输入框中每次输入新的数据翻过来影响到依赖的数据M
// 事件监听  input

document.getElementById('input').addEventListener('input',(e)=>{
  console.log(e.target.value);
  data.name = e.target.value
})

// 双向绑定
// M - V   data通过核心劫持api变成get和set的写法 这样数据变化我们就可以感知到 一旦数据变化拿到最新的值 更新视图
// V - M   事件监听 在回调函数中拿到用户输入的最新的值 反向赋值给依赖的数据 [借助中间变量让get和set联动起来]


</script>